<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-rate />
    </a-card>
    <a-card title="自定义颜色">
      <a-rate color="red" />
      <a-rate :color="color" />
    </a-card>

    <a-card title="只读模式">
      <a-rate :default-value="4" readonly />
    </a-card>

    <a-card title="任意长度的评分">
      <a-rate :count="10" />
    </a-card>

    <a-card title="自定义评分字符">
      <a-rate :default-value="2">
        <template #character="{ index }">
          <a-icon v-if="index < 3" name="zhuanshuguwen"> </a-icon>
          <a-icon v-else name="tijiaoyanzi"> </a-icon>
        </template>
      </a-rate>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
const color = {
  2: "red",
  4: "green",
  5: "blue",
};
</script>

<style lang="scss" scoped>
.flex {
  padding: 0rpx 20px;
}
</style>
